<template>
  <div class="guide">
    <img src="@/assets/images/logo.png" alt="" />
    <h3>辰兮音乐,给你不一样的体验</h3>
    <p @click="gotomain">
      跳过<span v-if="count > 0">{{ count }}S</span>
    </p>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      count: 3,
      timer: null,
    };
  },
  methods: {
    ...mapMutations(["setFootPlayer"]),
    gotomain() {
      if (this.count <= 0) {
        this.$router.push({ name: "main" });
      }
    },
  },
  mounted() {
    this.setFootPlayer(false);
    this.timer = setInterval(() => {
      if (this.count > 0) {
        this.count--;
      } else {
        clearInterval(this.timer);
        this.timer = null;
      }
    }, 1000);
  },
};
</script>


<style lang="scss">
.guide {
  height: 100vh;
  width: 100%;
  position: relative;
  img {
    margin-top: 100px;
    width: 70%;
  }
  h3 {
    font-size: 24px;
    color: #fff;
    font-style: italic;
    margin-top: 20px;
  }
  p {
    color: #fff;
    border: 1px solid #fff;
    padding: 5px 10px;
    position: absolute;
    top: 10px;
    right: 20px;
    border-radius: 20px;
  }
}
</style>